<template>
  <div>
    <!-- 左边不同颜色点 -->
    <el-table-column prop="newsStateName" label="状态" width="120">
      <template slot-scope="scope">
        <div class="box-dot">
          <span v-if="scope.row.newsState === 0" class="dot dot1" />
          <span v-else-if="scope.row.newsState === 1" class="dot dot2" />
          <span>{{ scope.row.newsStateName }}</span>
        </div>
      </template>
    </el-table-column>

    <!-- 动态大量不同颜色 -->
    <el-table-column prop="serviceStatusDict" fixed="right" label="服务状态" width="120">
      <template slot-scope="scope">
        <div class="box-dot">
          <span class="dot" :style="{backgroundColor: getBGC(scope.row.serviceStatus)}" />
          <span>{{ scope.row.serviceStatusDict }}</span>
        </div>
      </template>
    </el-table-column>
  </div>
</template>

<script>
/*
js文件
const statusList = [
  {
    code: '0',
    color: '#ff3399',
    describe: '中止'
  },
  {
    code: '10',
    color: '#ff7400',
    describe: '预约'
  }
]
export {
  statusList // 服务状态
}
*/
export default {
  data() {
    return {
    }
  },
  methods: {
    // 状态标识点颜色
    getBGC(num) {
      console.log('num', num)
      const item = this.statusList.find(v => v.code === num)
      console.log('item', item)
      return item.color
    }
  }
}
</script>

<style lang="scss" scoped>
// 左边不同颜色点
.box-dot{
  display: flex;
  align-items: center;
  .dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .dot1{
    background-color: #06c80b;
  }
  .dot2{
    background-color: #1890ff;
  }
}


// 动态大量不同颜色
.box-dot{
  display: flex;
  align-items: center;
  .dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
</style>

